const path = require('path')

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/',
  
  // 输出文件目录
  outputDir: 'dist',
  
  // 静态资源目录
  assetsDir: 'static',
  
  // HTML输出路径
  indexPath: 'index.html',
  
  // 文件名哈希
  filenameHashing: true,
  
  // eslint保存时检查
  lintOnSave: process.env.NODE_ENV !== 'production',
  
  // 是否使用包含运行时编译器的Vue构建版本
  runtimeCompiler: false,
  
  // 生产环境sourceMap
  productionSourceMap: false,
  
  // 跨域代理
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  
  // CSS配置
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      sass: {
        prependData: '@import "@/styles/variables.scss";'
      }
    }
  },
  
  // Webpack配置
  configureWebpack: {
    plugins: [
      // 自定义插件
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  
  chainWebpack: config => {
    // 更细粒度的控制
    config.plugin('html').tap(args => {
      args[0].title = '我的Vue应用'
      return args
    })
  },
  
  // 插件选项
  pluginOptions: {
    // 第三方插件配置
  },
//   在 Vue CLI 中，​​PWA（Progressive Web App）配置​​用于将你的 Vue 应用转换为渐进式 Web 应用，提供类似原生应用的体验。以下是详细说明：
pwa: {
  // 是否启用 PWA
  enabled: false,
  // 配置 PWA 应用信息
  name: 'Vue App',
  short_name: 'Vue App',
  description: 'A Vue.js app',
  // 配置 PWA 主题颜色
  theme_color: '#4DBA87',
  // 配置 PWA 启动颜色
  background_color: '#ffffff',
  // 配置 PWA 显示模式
}
}